<template>
  <div class="box1">
    <chartType1 :optionx="optionx" style="height: 120px" />
    <div class="boxline" ref="chart"></div>
    <div class="unit">功率</div>
    <div class="hz"><span>50</span>HZ</div>
    <div class="unit">频率</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chartType1 from "./chartType1.vue";

export default {
  name: "ChartType2",
  components: { chartType1 },
  data() {
    return {
      chartBox: null,
      optionx:{},
      option1: {
        series: [
          {
            name: "电流",
            type: "gauge",
            color: "#fff",
            startAngle: 180,
            endAngle: 0,
            radius: "100%",
            center: ["50%", "65%"], // 默认情况下，仪表盘位于容器的中心
            axisLine: {
              // 仪表盘的刻度线
              lineStyle: {
                width: 1,
              },
            },
            axisTick: {
              // 刻度标记
              distance: -8, // 将刻度标记放置在分割线上方
              length: 8,
              lineStyle: {
                color: "#e8e8e8",
                width: 2,
              },
            },
            splitLine: {
              // 分割线
              distance: 1, // 分割线距离中心更近
              length: 8,
              lineStyle: {
                color: "#e8e8e8",
                width: 4,
              },
            },
            axisLabel: {
              // 隐藏刻度文字
              show: false,
            },
            pointer: {
              // 指针
              width: 5,
              color: "auto",
            },
            title: {
              // 仪表盘标题
              offsetCenter: [0, "20px"],
              textStyle: {
                color: "#e8e8e8",
                fontSize: 14,
              },
            },
            detail: {
              // 显示数值
              formatter: "{value}",
              offsetCenter: [0, "-50%"],
              textStyle: {
                color: "#76F266",
                fontSize: 18,
              },
            },
            data: [
              {
                value: 50,
                name: "电流",
                unit: "A",
              },
            ],
          },
        ],
        graphic: {
          elements: [
            {
              type: "text",
              left: 10,
              top: 10,
              style: {
                text: "A",
                fontSize: 16,
                fill: "#e8e8e8", // 文字颜色
              },
            },
          ],
        },
      },

      option2: {
        grid: {
          top: 0,
          left: "3%",
          right: "4%",
          bottom: "20px",
          containLabel: true,
          backgroundColor: "#ffffff", // 内部背景颜色
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
          axisLine: {
            // 去掉刻度线
            show: false,
          },
          axisTick: {
            // 去掉刻度标记
            show: false,
          },
          axisLabel: {
            // 设置文字大小并旋转
            rotate: -90,
            interval: 0,
            position: "outsideBottom",
            textStyle: {
              fontSize: 10,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            position: 'insideLeft', // 文字在内部
            offset: -20, // 向内偏移 20px
            textStyle: {
              fontSize: 10,
            },
          },
        },
        series: [
          {
            data: [5, 4, 2, 5, 5, 5, 5, 5, 5, 5],
            type: "line",
            areaStyle: {},
          },
        ],
      },
    };
  },
  mounted() {
    this.initChart();
    this.optionx=this.option1;
  },
  methods: {
    initChart() {
      this.chartBox = echarts.init(this.$refs.chart);
      setTimeout(() => {
        this.chartBox.setOption(this.option2);
      }, 1000);
    },
    setoption2() {
      if (this.chartBox) {
        setTimeout(() => {
          this.chartBox.setOption(this.option2);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  width: 202px;
  height: 100%;
  .boxline {
    width: 202px;
    height: 100px;
  }
  .hz {
    width: calc(100% - 32px);
    margin-left: 16px;
    height: 38px;
    background: #242424;
    box-shadow: 0px 0px 27px 0px rgba(247, 248, 250, 0.47);
    border-radius: 11px;
    border: 1px solid #8e8e8e;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 38px;
    span {
      font-family: DIN;
      font-weight: bold;
      font-size: 28px;
      color: #84d5e1;
    }
  }
  .unit{
    width: 100%;
    font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
text-align: center;
  };
}
</style>
